<template>
  <div class="subpage">
    <my-head title="影院搜索" :back="true" :search="true"></my-head>
    <div class="search">
      <van-search
        v-model="keyword"
        show-action
        placeholder="输入影院名称"
        @search="onSearch"
        @cancel="onCancel"
        @input="onSearch"
      />
    </div>
    <div v-if="flag">
      <div class="hot">
        <p class="title">离你最近</p>
        <div class="hot-list">
          <div
            class="hot-item"
            @click="gotocinemadetail(l)"
            v-for="(l, i) in records"
            :key="i"
          >
            {{ l.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="sbox" v-else>
      <clist :list="list" v-if="list.length > 0"></clist>
      <div class="list-empty" v-else>
        <img
          src="https://assets.maizuo.com/h5/v5/public/app/img/rectangle@2x.2bdf0374.png"
          alt=""
        />
        <p>提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "search",
  data() {
    return {
      keyword: "",
      records: [], // 推荐离你最近的电影院
      flag: true,
      list: [], // 搜索后得到的数据
    };
  },
  methods: {
    gotocinemadetail(l) {
      this.$router.push({
        name: "cinema-detail",
        params: {
          cinemaId: l.cinemaId,
        },
      });
    },
    onSearch(value) {
      this.flag = false;
      this.list = this.cinemaList.filter(
        (item) =>
          item.name.indexOf(value) > -1 || item.address.indexOf(value) > -1
      );
    },
    onCancel() {
      this.flag = true;
      this.list = [];
    },
  },
  created() {},
  mounted() {
    this.checkHasCityInfo(() => {
      this.$ajax
        .getMaiData(
          {
            cityId: this.city.cityId,
          },
          {
            "X-Host": "mall.film-ticket.cinema.recommend",
          }
        )
        .then((res) => {
          this.records = res.data.cinemas;
        });

      //  请求电影影院列表
      // 判断全城电影院列表是否请求
      if (!this.cinemaList.length > 0) {
        this.$ajax
          .getMaiData(
            {
              cityId: this.city.cityId,
            },
            {
              "X-Host": "mall.film-ticket.cinema.list",
            }
          )
          .then((res) => {
            this.changeCinemaList(res.data.cinemas);
          });
      }
    });
  },
};
</script>


<style lang="scss" scoped>
.hot {
  padding: 10px;
  .title {
    font-size: 13px;
    color: #797d82;
    margin-left: 8px;
  }
  .hot-list {
    display: flex;
    flex-wrap: wrap;
    .hot-item {
      height: 30px;
      background-color: #f4f4f4;
      line-height: 30px;
      border-radius: 3px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 10px 8px 0 8px;
      font-size: 14px;
      color: #191a1b;
      width: auto;
      padding: 0 5px;

      text-align: center;
    }
  }
}

.list-empty {
  margin: 80px auto;
  width: 100%;
  img {
    width: 90px;
    height: 90px;
    margin: 20px auto;
  }
  p {
    color: #bdc0c5;
    font-size: 14px;
    margin: 0;
    text-align: center;
    width: 60%;
    margin: 10px auto;
  }
}
</style>

